<template>
    <div>
        <el-button @click="showDialog" size="small" type="primary">新增</el-button>
        <!-- 表格 -->
        <el-table :data="hospitals.list" style="width: 100%"> 
            <el-table-column type="index" label="序号" width="80"></el-table-column>
            <el-table-column prop="name" label="医院名称" width="200"></el-table-column>
            <el-table-column prop="introduce" label="医院简介"></el-table-column>
            <el-table-column prop="publishTime" label="医院地址" width="150">
                <template slot-scope="scope">
                    {{scope.row.province}} {{scope.row.city}} {{scope.row.area}}
                </template>
            </el-table-column>
            <el-table-column prop="flags" label="标记"></el-table-column>
            <el-table-column prop="longitude" label="经度"></el-table-column>
            <el-table-column prop="latitude" label="纬度"></el-table-column>
            <el-table-column label="操作" width="150" align="center" >
                <template slot-scope="scope">
                    <el-link :underline="false" @click="editHandler(scope.row)" style="margin-right:1rem">修改</el-link>
                    <el-link :underline="false" @click="deleteHandler(scope.row.id)">删除</el-link>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination
            layout="total, prev, pager, next"
            :page-size="params.pageSize"
            @current-change="pageChange"
            :total="hospitals.total">
        </el-pagination>

        <!-- 模态框 -->
        <el-dialog :title="title" :visible.sync="dialogFormVisible">
            {{form}}
            <el-form :model="form">
              <el-form-item label="名称" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="省市区" :label-width="formLabelWidth">
                <el-cascader v-model="form.pca" :options="pca" :props='{value:"name",label:"name"}' clearable></el-cascader>
              </el-form-item>
              <el-form-item label="介绍" :label-width="formLabelWidth">
                <el-input type="textarea" v-model="form.introduce" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="详细地址" :label-width="formLabelWidth">
                <el-input v-model="form.address" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="标记" :label-width="formLabelWidth">
                <el-input v-model="form.area" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="经度" :label-width="formLabelWidth">
                <el-input v-model="form.longitude" autocomplete="off" disabled></el-input>
              </el-form-item>
              <el-form-item label="纬度" :label-width="formLabelWidth">
                <el-input v-model="form.latitude" autocomplete="off" disabled></el-input>
              </el-form-item>
              <el-form-item label="纬度" :label-width="formLabelWidth">
                <!-- <el-input v-model="form.latitude" autocomplete="off"></el-input> -->
                <el-button @click="openMap">打开地图</el-button>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="saveHandler">确 定</el-button>
            </div>
        </el-dialog>

        <!-- 地图模态框 -->
        <el-dialog title="请选择地点" :visible.sync="dialogVisible" width="90%">
            <div id="container" style="height:400px"></div>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { mapActions, mapState } from 'vuex'
import pca from '../../../assets/pca.json'
export default {
    
    data() {
        return {
            pca,
            params: {
                page: 1,
                pageSize: 5
            },
            form: {},
            dialogFormVisible: false,
            title: '',
            formLabelWidth: '120px',
            dialogVisible: false,
            map: {}
        }
    },
    computed: {
        ...mapState("hospital",["hospitals"]),
    },
    created() {
        this.queryHospitals(this.params);
    },
    watch: {
        params: {
            handler() {
                this.queryHospitals(this.params)
            },
            deep: true
        }
    },
    mounted() {
        // this.initMap();
    },
    methods: {
        ...mapActions("hospital",["queryHospitals","saveOrUpdateHospital","deleteHospital"]),
        //初始化地图对象，加载地图
        initMap() {
            this.map = new AMap.Map("container", {
                resizeEnable: true
            })
            //输入提示
            var autoOptions = {
                input: "tipinput"
            };
            var auto = new AMap.Autocomplete(autoOptions);
            var placeSearch = new AMap.PlaceSearch({
                map: map
            });  //构造地点查询类
            AMap.event.addListener(auto, "select", select);//注册监听，当选中某条记录时会触发
            function select(e) {
                placeSearch.setCity(e.poi.adcode);
                placeSearch.search(e.poi.name);  //关键字查询查询
            }
        },
        // 获取经纬度
        showInfoClick(e){
            this.form.latitude = e.lnglat.getLat();
            this.form.longitude = e.lnglat.getLng();
        },
        // 事件绑定
        clickOn(){
            this.map.on('click', this.showInfoClick);
        },
        // 展示地图
        openMap() {
            this.dialogVisible = true;
            setTimeout(() => {
                this.initMap();
                this.clickOn()
            },1000)
        },
        // 新增
        showDialog() {
            this.dialogFormVisible = true;
            this.title = "发布新闻资讯"
        },
        // 保存
        saveHandler() {
            this.form.province = this.form.pca[0];
            this.form.city = this.form.pca[1];
            this.form.area = this.form.pca[2];
            this.saveOrUpdateHospital(this.form).then(res => {
                this.dialogFormVisible = false;
                this.queryHospitals(this.params)
            })
        },
        // 修改
        editHandler(row) {
            this.dialogFormVisible = true;
            this.title = '修改新闻资讯';
            this.form = JSON.parse(JSON.stringify(row))
            this.form.pca = []
            this.form.pca.push(row.province,row.city,row.area)
        },
        // 删除
        deleteHandler(id) {
            this.deleteHospital(id).then(res => {
                this.queryHospitals(this.params);
                this.$message({
                    message: res.message,
                    type: 'success'
                });
            })
        },
        // 分页
        pageChange(page) {
            this.params.page = page
        }
    }
}
</script>